<template>
    <div class="customerservice">
        <van-nav-bar title="客户服务" left-arrow @click-left="$router.back()" color="#00ba5d" />
        <div class="notice">
            <van-notice-bar left-icon="bulb-o" :scrollable="false" background="#f8f8f8" color="#000">
                <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
                    <van-swipe-item v-for="item in noticelist">{{ item.notice_title }}</van-swipe-item>
                </van-swipe>
            </van-notice-bar>
            <p>全部<van-icon @click="$router.push('/allnotice')" name="arrow" /></p>
        </div>
        <div class="help">
            <p>帮助中心</p>
            <van-tabs v-model="active" title-active-color="#00ba5d" color="#00ba5d">
                <van-tab>
                    <template #title>猜你想问 </template>
                    <van-cell title="如何申请售后服务？" is-link />
                    <van-cell title="订单还没有收到，怎么办？" is-link />
                    <van-cell title="商品送错怎么办？" is-link />
                </van-tab>
                <van-tab>
                    <template #title>订单&商品</template>
                    <van-cell title="违规订单处理规则？" is-link />
                    <van-cell title="商品缺货怎么办？" is-link />
                    <van-cell title="为什么会收到退款信息？" is-link />
                    <van-cell title="怎么修订订单？" is-link />
                    <van-cell title="如何取消订单？" is-link />
                </van-tab>
                <van-tab>
                    <template #title>配送类</template>
                    <van-cell title="配送收费么、多少钱免配送费？" is-link />
                    <van-cell title="可以提前配送吗？" is-link />
                    <van-cell title="订单超时未配送？" is-link />
                    <van-cell title="配送订单限量？" is-link />
                    <van-cell title="7FRESH的配送范围？" is-link />
                </van-tab>
                <van-tab>
                    <template #title>售后类</template>
                    <van-cell title="货已退、退款怎么还没有收到？" is-link />
                    <van-cell title="商品的售后政策是什么样的？" is-link />
                    <van-cell title="退款到账时间是多久？" is-link />
                    <van-cell title="收到商品不新鲜/变质怎么办？" is-link />
                </van-tab>
                <van-tab>
                    <template #title>财务类</template>
                    <van-cell title="支付失败了怎么办？" is-link />
                    <van-cell title="积分政策" is-link />
                    <van-cell title="重复支付了怎么办？" is-link />
                    <van-cell title="目前的主要支付方式都有哪些呢？" is-link />
                    <van-cell title="刷脸支付安全吗？" is-link />
                </van-tab>
            </van-tabs>

        </div>
        <van-button type="primary" round  size="large" to="/Onlineservice"><van-icon name="service-o"
                class="right" />在线客服</van-button>
        <section @click="phone" ><van-icon name="phone" class="right" color="#979797" />客服热线</section>
    </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    data() {
        return {
            noticelist: [
                {
                    notice_id: 122376545,
                    notice_title: "《七鲜用户服务协议》调整公告",
                    notice_details: "尊敬的七鲜用户： 我们本次对《七鲜用户服务协议》进行了更新。更新后的版本将于2023年8月9日生效,具体内容可查阅《七鲜用户服务协议》 如有任何疑问,请咨询七鲜客服,联系电话:4006068768。 特此公告",
                    notice_time: "2023-08-04"
                },
                {
                    notice_id: 233144,
                    notice_title: "增加《违规七鲜账号处理规则》公告",
                    notice_details: "尊敬的七鲜用户： 您好，我们本次增加了《违规七鲜账号处理规则》，将于2023年8月9日生效，具体内容可查阅《违规七鲜账号处理规则》。 如有任何疑问，请咨询七鲜客服，联系电话：4006068768。 特此公告。",
                    notice_time: "2023-08-02"
                },
                {
                    notice_id: 31414,
                    notice_title: "《七鲜违规订单处理规则》调整公告",
                    notice_details: "尊敬的七鲜用户： 我们本次对《七鲜违规订单处理规则》进行了更新。更新后的版本将于2023年8月9日生效，具体内容可查阅《七鲜违规订单处理规则》 如有任何疑问，请咨询七鲜客服，联系电话：4006068768。 特此公告。",
                    notice_time: "2023-08-02"
                },
                {
                    notice_id: 41441,
                    notice_title: "《七鲜隐私政策》调整公告",
                    notice_details: "尊敬的七鲜用户： 我们本次对《七鲜隐私政策》进行了更新。此版本《七鲜隐私政策》的更新主要集中在：“我们如何对外提供您的个人信息”中的“关联方共享个人信息列表”。更新后的版本将于2022年4月15日生效，具体内容可查阅《七鲜隐私政策》 如有任何疑问，请咨询七鲜客服，联系电话：4006068768。 特此公告。",
                    notice_time: "2022-04-08"
                },
                {
                    notice_id: 32534567,
                    notice_title: "《七鲜隐私政策》调整公告",
                    notice_details: "尊敬的七鲜用户： 我们本次对《七鲜隐私政策》进行了更新。此版本《七鲜隐私政策》的更新主要集中在：七鲜需要收集的个人信息种类、第三方SDK信息、申请权限信息。更新后的版本将于2021年8月17日生效，具体内容可查阅《七鲜隐私政策》 如有任何疑问，请咨询七鲜客服，联系电话：4006068768。 特此公告。",
                    notice_time: "2021-08-10"
                },
                {
                    notice_id: 41111111111,
                    notice_title: "增加《京东隐私政策》公告",
                    notice_details: "尊敬的七鲜用户： 您好，我们本次增加了《京东隐私政策》，该隐私政策主要向您告知所收集的个人信息种类、申请权限和用途，将于2021年7月14日生效，具体内容可查阅《京东隐私政策》。 如有任何疑问，请咨询七鲜客服，联系电话：4006068768。 特此公告。",
                    notice_time: "2021-07-07"
                },
                {
                    notice_id: 2425436,
                    notice_title: "《京东用户注册协议》修改公告",
                    notice_details: "尊敬的7FRESH用户： 《京东7FRESH用户注册协议》将更名为《7FRESH七鲜用户协议》。最新版本的《7FRESH七鲜用户协议》已于2019年9月12日上线，并将于2019年9月19日起生效。 根据国家法律法规变化及本网站运营需要，京东将对《7FRESH七鲜隐私政策》条款及相关规则不时地进行修改，修改后的内容将发布于本网站，并取代此前相关内容，请您及时关注本网站公告、提示信息及协议、规则等相关内容的变动。如您不同意更新后的内容，应立即停止使用本网站；如您继续使用本网站，即视为知悉变动内容并同意接受。",
                    notice_time: "2019-09-12"
                }
            ],
            active: 0,
        };
    },
    methods: {
        phone() {
            // console.log(111);
            Dialog.alert({
                message: '400-606-8768',
            }).then(() => {
                // on close
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.customerservice {
    width: 100%;
    height: 100%;
    background: #f8f8f8;

    .notice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;

        .van-notice-bar {
            width: 280px
        }

        .notice-swipe {
            height: 40px;
            line-height: 40px;
        }

        p {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-right: 10px;
        }
    }

    .help {
        width: 100%;
        height: 380px;

        p {
            margin-left: 11px;
            padding: 10px 0;
        }
    }

    .van-button {
        margin-bottom: 10px;
    }

    section {
        text-align: center;
    }

    .right {
        margin-right: 15px;
        font-size: 18px;
    }
}
</style>